<form name="form" class="form-horizontal node-group-dialog" novalidate ng-submit="form.$valid && vm.save()">
    <div class="modal-header">
        <h4 class="modal-title">宿主机组</h4>
    </div>
    <div class="modal-body">
        <div class="form-group" ng-class="{'has-error':(form.name.$touched || form.$submitted ) &&
        (form.name.$error.required || form.name.$error.pattern)}">
            <label for="name" class="col-sm-3 control-label">组名称</label>
            <div class="col-sm-7">
                <input type="text" maxlength="50" id="name" name="name" ng-model="vm.name" class="form-control" placeholder="请输入组名称"
                       ng-pattern="/^\w+$/" required/>
                <div class="text-danger" ng-show="(form.name.$touched || form.$submitted ) &&
                (form.name.$error.required || form.name.$error.pattern)">
                    请输入有效组名称 ( 允许数字、英文字母与下划线 )</div>
            </div>
        </div>
        <div class="form-group margin-bottom-5">
            <label for="name" class="col-sm-3 control-label">所属宿主机</label>
            <div class="col-sm-8 table-select-box">
                <ul class="list-inline">
                    <li ng-if="vm.selectList.length">
                        <div ng-click="vm.expendSelList()" class="select-item">{{vm.selectList.length}}
                            <i ng-if="!vm.selListExpend" class="fa fa-plus margin-left-10"></i>
                            <i ng-if="vm.selListExpend" class="fa fa-minus margin-left-10"></i>
                        </div>
                    </li>
                    <li ng-repeat="elem in vm.selectList" ng-if="vm.selListExpend">
                        <div ng-click="vm.nodeUnSel($index)" class="select-item">
                            {{::elem.nodeIp}}<i class="fa fa-close margin-left-5"></i></div>
                    </li>
                </ul>
                <div class="text-danger" ng-show="vm.nonSelectError && form.$submitted">请至少选择一台宿主机</div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-8 table-fixed-group">
                <div class="clearfix table-fixed-header">
                    <div style="width: 80%;">IP地址
                        <div class="header-filter"><i class="fa fa-filter"></i>
                            <input placeholder="请输入IP地址查询" ng-model="vm.searchIp" type="text"/>
                        </div>
                    </div>
                    <div style="width: 20%;">状态</div>
                </div>
                <div class="table-fixed-box">
                    <table class="table table-hover">
                        <tbody>
                        <tr ng-repeat="elem in vm.nodeList | filter: vm.searchIp" ng-click="vm.nodeSelect($index)" ng-class="{'info':elem.checked}">
                            <td width="80%">{{::elem.nodeIp}}</td>
                            <td ng-switch="::elem.nodeStatus" width="20%">
                                <span ng-switch-when="true" class="text-success">正常</span>
                                <span ng-switch-when="false" class="text-danger">异常</span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="loading" ng-show="!vm.nodeList"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="submit" ng-disabled="vm.loading" class="btn btn-primary btn-sm">
            <i ng-show="vm.loading" class="fa fa-cog fa-lg fa-spin margin-right-5"/>确定
        </button>
        <button ng-click="vm.cancel()" type="button" class="btn btn-default btn-sm">取消</button>
    </div>
</form>